<script setup>
    import { getName, getIdCardNumber, getMoble, getBank_account } from '@/utils/index'
    
    // 列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20,
    })

    // 列表数据加载中
    let dataLoading = $ref(false)


    const getList = () => {
        dataLoading = true

        setTimeout(() => {
            dataLoading = false
            resData = [
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-11-01', s15: '2025-11-01' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-10-18', s15: '2025-10-18' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-10-05', s15: '2025-10-05' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-09-24', s15: '2025-09-24' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-09-17', s15: '2025-09-17' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-09-11', s15: '2025-09-11' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-05-23', s15: '2025-05-23' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-04-05', s15: '2025-04-05' },
            { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-02-12', s15: '2025-02-12' },
            ]
            for(let i = 0; i < filterParams.pageSize - 9; i++){
                let data = { s1: getName(), s2: '就业困难的失业人员', s3: '社区网格员', s4: '济南信息科技公司', s5: '刘欢', s6: '男', s7: '贫困户', s8: '济南市', s9: getMoble(), s10: getIdCardNumber(), s11: '龙潭街道',s12: '建设银行', s13: getBank_account(), s14: '2022-01-01', s15: '2024-01-01' }
                resData.push(data)
            }
            totalCount = 1546
        }, 300);
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 20
        }
    }

    // 按地级市筛选
    const FilterByCity = () => {
        handleClickReset()
        getList()
    }

    let dialogVisible = $ref(false)
    
    let memberDetails = [
    {
        "id": "1581287881320776695",
        "createBy": "admin",
        "createTime": "2022-10-15 22:17:26",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "dwName": "西集镇人民政府",
        "gygName": "村容保洁",
        "name": "李*",
        "idCard": "370406*********526",
        "tcType": "1",
        "type": "4",
        "v1": "202207",
        "v2": "202206",
        "v3": "202206",
        "v4": "1",
        "v5": "800",
        "v6": "0",
        "v7": "0",
        "v8": "0",
        "v9": "0",
        "v10": "0",
        "v11": "0",
        "v12": "0",
        "v13": "0",
        "v14": "800",
        "tcType_dictText": "乡村",
        "type_dictText": "农村大龄人员（45-65周岁）"
    },
    {
        "id": "1581287881417245548",
        "createBy": "admin",
        "createTime": "2022-10-15 22:17:48",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "dwName": "西集镇人民政府",
        "gygName": "村容保洁",
        "name": "李*",
        "idCard": "370406*********526",
        "tcType": "1",
        "type": "4",
        "v1": "202207",
        "v2": "202203",
        "v3": "202205",
        "v4": "3",
        "v5": "2400",
        "v6": "0",
        "v7": "0",
        "v8": "0",
        "v9": "0",
        "v10": "0",
        "v11": "0",
        "v12": "0",
        "v13": "0",
        "v14": "2400",
        "tcType_dictText": "乡村",
        "type_dictText": "农村大龄人员（45-65周岁）"
    }
]

    defineExpose({
        FilterByCity
    })
    

</script>

<template>
    <div class="health-search">
        <div class="health-search-form-warp dz-filter-wrap">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="105"
                class="mt10"
            >
                <el-form-item label="姓名">
                    <el-input v-model="filterParams.name"></el-input>
                </el-form-item>
                <el-form-item label="人员类别">
                    <el-input v-model="filterParams.type"></el-input>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ totalCount }}条</span>
                </div>
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="624"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
            <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="s1" label="姓名" min-width="90" align="center" />
                <el-table-column prop="s2" label="人员类别" min-width="180" />
                <el-table-column prop="s3" label="岗位名称" min-width="120" />
                <el-table-column prop="s4" label="用岗单位名称" min-width="150" />
                <el-table-column prop="s5" label="岗位联系人" min-width="90" align="center" />
                <el-table-column prop="s6" label="性别" min-width="70" align="center" />
                <el-table-column prop="s7" label="困难类别" min-width="100" />
                <el-table-column prop="s8" label="所在区划" min-width="100" align="center" />
                <el-table-column prop="s9" label="联系电话" min-width="120" align="center" />
                <el-table-column prop="s10" label="身份证就失业登记号" min-width="180" />
                <el-table-column prop="s11" label="所在街道" min-width="140" />
                <el-table-column prop="s12" label="开户行" min-width="120" />
                <el-table-column prop="s13" label="社保卡银行账号" min-width="250" align="center" />
                <el-table-column prop="s14" label="合同起始时间" min-width="130" align="center" />
                <el-table-column prop="s15" label="合同终止时间" min-width="130" align="center" />
                <el-table-column prop="v6" label="操作" min-width="100" align="center">
                    <template #default>
                        <div class="table-operation flex-center">
                            <span @click="dialogVisible=true">详情</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

    <!-- 补贴详情 -->
    <el-dialog
        v-model="dialogVisible"
        width="1450px"
    >
        <el-table 
            :data="memberDetails" 
            style="width: 100%"
            height="550"
            size="large"
        >
            <el-table-column type="index" label="序号" min-width="60" align="center" />
            <el-table-column prop="v1" label="申请月份" min-width="80" align="center" />
            <el-table-column prop="v2" label="补贴开始年月" min-width="80" align="center" />
            <el-table-column prop="v3" label="补贴结束年月" min-width="80" align="center" />
            <el-table-column prop="v4" label="本次申请月数" min-width="80" align="center" />
            <el-table-column prop="v5" label="岗位补贴金额" min-width="80" align="center" />
            <el-table-column prop="v6" label="养老金额" min-width="80" align="center" />
            <el-table-column prop="v7" label="医疗金额" min-width="80" align="center" />
            <el-table-column prop="v8" label="失业金额" min-width="80" align="center" />
            <el-table-column prop="v9" label="工伤金额" min-width="80" align="center" />
            <el-table-column prop="v10" label="生育金额" min-width="80" align="center" />
            <el-table-column prop="v11" label="大额金额" min-width="80" align="center" />
            <el-table-column prop="v12" label="社保补贴金额" min-width="80" align="center" />
            <el-table-column prop="v13" label="意外伤害险补贴金额" min-width="80" align="center" />
            <el-table-column prop="v14" label="总金额" min-width="80" align="center" />
        </el-table>
    </el-dialog>

</template>
